<template>
    <div class="bg">
        <div class="bottom">
            <ul class="bottom-wrapper">
                <li v-for="(item,index) in dpList" @click="handleDpType(item,index)" :key="index" :class="{active:index==currentIndex}" class="dp-handle-row">
                    <div class="icon-row">
                        <img class="icon" v-if="!!item.name" :src="item.icon" alt="">
                        <span v-else>+</span>
                    </div>
                    <div class="circle-row">
                    </div>
                    <div>{{item.name}}</div>
                </li>
            </ul>
            <img class="bottom-bg" src="../../assets/dp1/bottom-bg.png" alt="">
        </div>
    </div>
</template>

<script>
const zhzxIcon = require("../../assets/dp1/zhzx.png");
const djztIcon = require("../../assets/dp1/djzt.png");
const zwztIcon = require("../../assets/dp1/zwzt.png");
const zzztIcon = require("../../assets/dp1/zzzt.png");
const cgztIcon = require("../../assets/dp1/cgzt.png");
export default {
    data() {
        return {
            currentIndex: 3, //大屏专栏操作列表下标
            dpList: [
                { name: "综合展现", icon: zhzxIcon, type: 1,path:"/dp1" },
                { name: "党建专题", icon: djztIcon, type: 2,path:"/dp2" },
                { name: "政务专题", icon: zwztIcon, type: 3 ,path:"/dp3"},
                { name: "综治专题", icon: zzztIcon, type: 4 },
                { name: "城管专题", icon: cgztIcon, type: 5 ,path:"/demoDp5"},
                { name: "", icon: "+", type: 6 }
            ]
        };
    },
    methods: {
        handleDpType(item, index) {
            this.currentIndex = index;
            if (item.path) {
                this.$router.push(item.path);
            }
        }
    }
};
</script>

<style lang="scss" scoped>
.bg {
    height: 896px;
    width: 3072px;
    background: url("../../assets/dp4/demoDp4-bg.png") no-repeat;
    background-size: 100% 100%;
    position: relative;
}
.bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3072px;
    position: absolute;
    bottom: 0;
    .bottom-bg {
        margin-left: 30px;
    }
}
.bottom-wrapper {
    width: 585px;
    height: 55px;
    // margin-left: 30px;
    display: flex;
    justify-content: space-around;
    position: absolute;
    bottom: 67px;
}
.dp-handle-row {
        text-align: center;
        color: #abd1ff;
        &.active {
            .circle-row {
                opacity: 1;
            }
            color: #f0f7ff;
        }
        .circle-row {
            width: 85px;
            height: 85px;
            border-radius: 50%;
            margin-bottom: 10px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            background-image: linear-gradient(0deg, 
		#157f7e 0%, 
		#77bfbf 51%, 
		#d9ffff 100%), 
	linear-gradient(
		#bfbfbf, 
		#bfbfbf);
	background-blend-mode: normal, 
		normal;
	box-shadow: 1.5px 2.6px 19px 1px 
		rgba(0, 0, 0, 0.96);
            opacity: 0.4;
        }
    }
    .icon-row {
        height: 85px;
        width: 85px;
        position: absolute;
        top: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 40px;
    }
    .icon {
        z-index: 999;
    }
</style>